<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<script type="text/javascript">
    var albumTree;
function getStyle(obj, attr)
{
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
}

function startMove(obj, json, onEnd){
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		doMove(obj, json, onEnd);
	}, 30);
}
function doMove(obj, json, onEnd){
	var attr='';
	var bStop=true;
	for(attr in json){
		var iCur=0;
		if(attr=='opacity'){
			iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
		}else{
			iCur=parseInt(getStyle(obj, attr));
		}
		var iSpeed=(json[attr]-iCur)/5;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		
		if(json[attr]!=iCur){
			bStop=false;
		}
		if(attr=='opacity'){
			obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
			obj.style.opacity=(iCur+iSpeed)/100;
		}else{
			obj.style[attr]=iCur+iSpeed+'px';
		}
	}
	if(bStop){
		clearInterval(obj.timer);		
		if(onEnd){
			onEnd();
		}
	}
}
 $(function() {
 	/* 相册预览插件开始 */
	var oBox = document.getElementById('box');
	var oBg = document.getElementById('bg');
	var oBot = document.getElementById('bottom');
	var aBli = oBot.getElementsByTagName('li');
	var oFrame = document.getElementById('frame');
	var aLi = oBox.getElementsByTagName('li');
	var aImg = oBox.getElementsByTagName('img');
	var i = iNow =  0;
	for(i=0;i<aLi.length;i++){
		aLi[i].index = i;
		aLi[i].onclick = function(){
			with(oFrame.style){display = 'block',top = this.offsetTop +'px',left = this.offsetLeft +'px',width = this.offsetWidth +'px',height = this.offsetHeight +'px';}
			oFrame.innerHTML = '<img src="${staticPath }/static/upload/images/'+(this.index + 1)+'.jpg" />';
			var oImg = oFrame.getElementsByTagName('img')[0];
			var iWidth = oImg.width;
			var iHeight = oImg.height;
			var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth /2)-150);
			var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight /2) - 100);
			with(oImg.style){height = width = '100%';}
			startMove(oFrame, {opacity:100, left:iLeft, top:iTop, width:iWidth, height:iHeight});
			oBg.style.display = 'block';
			oBot.style.display = 'block';
			iNow = this.index + 1;
		};
	}
	document.onmousedown = function(){
		return false
	};
	aBli[0].onclick = function(){
		iNow--;
		if(iNow == 0)iNow = aLi.length;
		oFrame.innerHTML = '<img src="${staticPath }/static/upload/images/'+iNow+'.jpg" width="100%" height="100%" />';
	};
	aBli[1].onclick = function(){
		oFrame.style.cursor = 'move';
		oFrame.onmousedown = function(e){
			var oEvent = e || event;
			var X = oEvent.clientX - oFrame.offsetLeft;
			var Y = oEvent.clientY - oFrame.offsetTop;
			document.onmousemove = function(e){
				var oEvent = e || event;
				var L = oEvent.clientX - X;
				var T = oEvent.clientY - Y;
				if(L < 0){
					L = 0;
				}else if(L > document.documentElement.clientWidth - oFrame.offsetWidth){
					L = document.documentElement.clientWidth - oFrame.offsetWidth
				}
				if(T < 0){
					T = 0;
				}else if(T > document.documentElement.clientHeight - oFrame.offsetHeight){
					T = document.documentElement.clientHeight - oFrame.offsetHeight;
				}
				oFrame.style.left = L + 'px';
				oFrame.style.top = T + 'px';
				oFrame.style.margin = 0;
				return false;
			}
			document.onmouseup = function(){
				document.onmouseup = null;
				document.onmousemove = null;
			};
			return false;
		};
	};
	aBli[2].onclick = function(){
		iNow++;
		if(iNow > aLi.length)iNow = 1;
		oFrame.innerHTML = '<img src="${staticPath }/static/upload/images/'+iNow+'.jpg" width="100%" height="100%" />';
	};
	aBli[3].onclick = function(){
		startMove(oFrame, {opacity:0, left:aImg[iNow-1].offsetLeft, top:aImg[iNow-1].offsetTop, width:150, height:100}, function(){
			oFrame.style.display = 'none';
			oBg.style.display = 'none';
			oBot.style.display = 'none';
			oFrame.onmousedown = null;
			oFrame.style.cursor = 'auto';
		});
	};
	/*************** 相册预览插件结束 ***********/
	
	//easyui tree树插件
        $('#albumTree').tree({
            url : '${path }/admin/album/tree',
            parentField : 'pid',
            lines : true,
            onContextMenu: function(e, node){
            	$("#albumId").val(node.id);
				e.preventDefault();
				//选中状态 
                $("#rightmenu").menu("show", {
                    left: e.pageX,
                    top: e.pageY
                });
			},
            onClick : function(node) {
                $("#albumId").val(node.id);
            }
            
        });

    });
    
    function addAlbumFun() {
        parent.$.modalDialog({
            title : '添加',
            width : 500,
            height : 300,
            href : '${path }/admin/album/add',
            buttons : [ {
                text : '添加',
                handler : function() {
                    var f = parent.$.modalDialog.handler.find('#albumEditForm');
                    f.submit();
                }
            } ]
        });
    }
    
    
    function editAlbumFun() {
    var id=$("#albumId").val();
     	if (id==""||id==undefined) {
			parent.$.messager.alert('错误', "请选择要编辑的相册！", 'warning');
			return false;
		}
        parent.$.modalDialog({
            title : '编辑',
            width : 500,
            height : 300,
            href : '${path }/admin/album/edit?id=' +id,
            buttons : [ {
                text : '确定',
                handler : function() {
                    var f = parent.$.modalDialog.handler.find('#albumEditForm');
                    f.submit();
                }
            } ]
        });
    }
        
    function deleteAlbumFun() {
     	var id=$("#albumId").val();
     	if (id==""||id==undefined) {
			parent.$.messager.alert('错误', "请选择要删除的相册！", 'warning');
			return false;
		}
        parent.$.messager.confirm('询问', '您是否要删除当前信息？', function(b) {
            if (b) {
                progressLoad();
                $.post('${path }/admin/album/delete', {
                    id : id
                }, function(result) {
                    if (result.success) {
                        parent.$.messager.alert('提示', result.msg, 'info');
                        $("#albumTree").tree("reload");
                    } else {
                        parent.$.messager.alert('错误', result.msg, 'error');
                    }
                    progressClose();
                }, 'JSON');
            }
        });
    }
    function openUpload(){
    	var id=$("#albumId").val();
     	if (id==""||id==undefined) {
			parent.$.messager.alert('错误', "请点击左侧相册列表选择相册！", 'warning');
			return false;
		}				
        parent.$.modalDialog({
            title : '上传图片',
            width: 780,
		    height: 430,
		    maximizable:true,
		    top: ($(window).height() - 520) * 0.5,
		    left: ($(window).width() - 580) * 0.5,
            href : '${path }/admin/album/openupload'
        });
    }
</script>
<link href="${staticPath }/static/upload/css/imglist.css" rel="stylesheet" type="text/css" />
<div class="easyui-layout" data-options="fit:true,border:false">
	<div id="rightmenu" class="easyui-menu" style="width:120px;">
		<div onclick="addAlbumFun()" data-options="iconCls:'fi-plus icon-green'">新增</div>
		<div onclick="editAlbumFun()" data-options="iconCls:'fi-pencil icon-green'">编辑</div>
		<div onclick="deleteAlbumFun()" data-options="iconCls:'fi-x icon-green'">删除</div>
	</div>
	<input type="hidden" name="albumId" id="albumId" value=""/>
	<!-- 工具栏 -->
 	<div data-options="region:'north',border:false" style="height: 30px; overflow: hidden;background-color: #fff">
    	<a onclick="addAlbumFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'fi-plus on'">添加</a>
    	<a onclick="editAlbumFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'fi-pencil on'">编辑</a>
    	<a onclick="openUpload();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'fi-upload  on'">上传图片</a>
    	
    </div>
    <!-- 图片列表 -->
    <div data-options="region:'center',border:true,title:'图片列表'" >
	     <div class="box" id="box">
			<ul class="imagelist">
		    	<li><img src="${staticPath }/static/upload/images/1.jpg" width="100%" height="100%"></li>
		       
		    </ul>
		</div>
		<div id="bg"></div>
		<div id="bottom">
			<ul>
		    	<li class="prev"></li>
		        <li class="img"></li>
		        <li class="next"></li>
		        <li class="close"></li>
		    </ul>
		</div>
		<div id="frame"></div>
    </div>
    <!-- 分页区 -->
    
    
    <!-- 树形相册列表 -->
    <div data-options="region:'west',border:true,split:false,title:'相册列表'"  style="width:150px;overflow: hidden; ">
        <ul id="albumTree" style="width:160px;margin: 10px 10px 10px 10px"></ul>
    </div>
</div>
